<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-aligin
		     使用方法：1.用于表格种单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					    【文本和图片垂直居中（对齐）效果】
						对齐分为四种：基线对齐、顶部对齐
						             居中对齐、底部对齐
				    元素种类：块元素、行元素、行内块元素
					块元素特点：独占一行、设置宽高
		            行元素特点：一行内显示、不可设置宽高
					网页：元素之间嵌套生成
					
					行元素与块元素可以任意嵌套
					前提：设置宽高--行套块
					             --块套块  √
								 --块套行  √
					前提：一行内显示--行套行  √
								   --块套块  ×
								   --块套行  √
								   --行套行  √-->
		<style>
			 i mg:nth-child(1){
			   /* vertical-align:baseline 默认基线对齐 */
			   vertical-align: baseline;
		    }
			/* 问题：派生选择器，特点：找后代 p img */
			 i mg:nth-child(2){
			   /* vertical-align:top 默认顶部对齐 */
			   vertical-align: top;
			   width: 500px;
			   height: 500px;
			   background: red;
			}	
			img.baseline{
				vertical-align: baseline;
			}
			img.top{
				vertical-align: top;
			}
			img.middle{
				vertical-align: middle;
			}
			img.bottem{
				vertical-align: bottom;
			}
		</style>
							   
	</head>
	<body>
		<!-- 需求结构：4个p、嵌套文字：图片叫什么名字
		                    文字后加img，设定宽高：25~100px
							每个图片后面加：基线对齐、顶部对齐
						    居中对齐、底部对齐
		 -->
		 <h1>文本与图片垂直属性</h1>
		 <p>蜡笔小新1<img class="baseline" src="img/蜡笔小新1.png" alt="蜡笔小新1" width="100px" height="100px">基线对齐</p>
		 <p>蜡笔小新2<img class="top" src="img/蜡笔小新2.png" alt="蜡笔小新2" width="100px" height="100px">顶部对齐</p>
		 <p>圣诞<img class="middle" src="img/圣诞.png" alt="圣诞" width="100px" height="100px">居中对齐</p>
		 <p>相机<img class="bottom" src="img/相机.png" alt="相机" width="100px" height="100px">底部对齐</p>
		 <!-- css选择器--抓第一张图片.....
		  思路：派生选择器：找后代+伪类选择器：添加效果【错误】
		  错误原因：html结构不符合派生特点：p包含4个img
		           伪类选择器，4个img需要一个p中
		  p img:nth-child(1)
		  -->
	</body>
</html>